<template>
  <div class="animated fadeIn">

    <div class="row">
      <div class="col-sm-6 col-lg-3">
        <div class="card card-inverse card-primary">
          <require from="./card-chart1"></require>
          <card-chart1></card-chart1>
        </div>
      </div>
      <!--/col-->

      <div class="col-sm-6 col-lg-3">
        <div class="card card-inverse card-info">
          <require from="./card-chart2"></require>
          <card-chart2></card-chart2>
        </div>
      </div>
      <!--/col-->

      <div class="col-sm-6 col-lg-3">
        <div class="card card-inverse card-warning">
          <require from="./card-chart3"></require>
          <card-chart3></card-chart3>
        </div>
      </div>
      <!--/col-->

      <div class="col-sm-6 col-lg-3">
        <div class="card card-inverse card-danger">
          <require from="./card-chart4"></require>
          <card-chart4></card-chart4>
        </div>
      </div>
      <!--/col-->
    </div>
    <!--/row-->

    <div class="card" ng-controller="trafficDemoCtrl">
      <require from="./traffic-demo"></require>
      <traffic-demo></traffic-demo>
    </div>
    <!--/.card-->

    <div class="row" ng-controller="socialBoxCtrl">
      <require from="./social-box"></require>
      <social-box></social-box>
    </div>
    <!--/.row-->

    <div class="row">
      <div class="col-md-12">
        <div class="card">
          <div class="card-header">
            Traffic &amp; Sales
          </div>
          <div class="card-block">
            <div class="row">
              <div class="col-sm-12 col-lg-4">
                <div class="row">
                  <div class="col-sm-6">
                    <div class="callout callout-info">
                      <small class="text-muted">New Clients</small>
                      <br>
                      <strong class="h4">9,123</strong>
                      <require from="./sparkline-chart"></require>
                      <div class="chart-wrapper" as-element="sparkline-chart" data-index="0">
                      </div>
                    </div>
                  </div>
                  <!--/.col-->
                  <div class="col-sm-6">
                    <div class="callout callout-danger">
                      <small class="text-muted">New Clients</small>
                      <br>
                      <strong class="h4">9,123</strong>
                      <div class="chart-wrapper" as-element="sparkline-chart" data-index="1"></div>
                    </div>
                  </div>
                  <!--/.col-->
                </div>
                <!--/.row-->
                <hr class="mt-0">
                <require from="./horizontal-bars"></require>
                <ul class="horizontal-bars" as-element="horizontal-bars">

                </ul>
              </div>
              <!--/.col-->
              <div class="col-sm-6 col-lg-4">
                <div class="row">
                  <div class="col-sm-6">
                    <div class="callout callout-warning">
                      <small class="text-muted">New Clients</small>
                      <br>
                      <strong class="h4">9,123</strong>
                      <div class="chart-wrapper" as-element="sparkline-chart" data-index="2">

                      </div>
                    </div>
                  </div>
                  <!--/.col-->
                  <div class="col-sm-6">
                    <div class="callout callout-success">
                      <small class="text-muted">New Clients</small>
                      <br>
                      <strong class="h4">9,123</strong>
                      <div class="chart-wrapper" as-element="sparkline-chart" data-index="3">
                      </div>
                    </div>
                  </div>
                  <!--/.col-->
                </div>
                <!--/.row-->
                <hr class="mt-0">
                <require from="./horizontal-bars2"></require>
                <ul class="horizontal-bars type-2" as-element="horizontal-bars2">

                </ul>
              </div>
              <!--/.col-->
              <div class="col-sm-6 col-lg-4">
                <div class="row">
                  <div class="col-sm-6">
                    <div class="callout">
                      <small class="text-muted">New Clients</small>
                      <br>
                      <strong class="h4">9,123</strong>
                      <div class="chart-wrapper" as-element="sparkline-chart" data-index="4"></div>
                    </div>
                  </div>
                  <!--/.col-->
                  <div class="col-sm-6">
                    <div class="callout callout-primary">
                      <small class="text-muted">New Clients</small>
                      <br>
                      <strong class="h4">9,123</strong>
                      <div class="chart-wrapper" as-element="sparkline-chart" data-index="5"></div>
                    </div>
                  </div>
                  <!--/.col-->
                </div>
                <!--/.row-->
                <hr class="mt-0">
                <ul class="icons-list">
                  <li>
                    <i class="icon-screen-desktop bg-primary"></i>
                    <div class="desc">
                      <div class="title">iMac 4k</div>
                      <small>Lorem ipsum dolor sit amet</small>
                    </div>
                    <div class="value">
                      <div class="small text-muted">Sold this week</div>
                      <strong>1.924</strong>
                    </div>
                    <div class="actions">
                      <button type="button" class="btn btn-link text-muted"><i class="icon-settings"></i>
                      </button>
                    </div>
                  </li>
                  <li>
                    <i class="icon-screen-smartphone bg-info"></i>
                    <div class="desc">
                      <div class="title">Samsung Galaxy Edge</div>
                      <small>Lorem ipsum dolor sit amet</small>
                    </div>
                    <div class="value">
                      <div class="small text-muted">Sold this week</div>
                      <strong>1.224</strong>
                    </div>
                    <div class="actions">
                      <button type="button" class="btn btn-link text-muted"><i class="icon-settings"></i>
                      </button>
                    </div>
                  </li>
                  <li>
                    <i class="icon-screen-smartphone bg-warning"></i>
                    <div class="desc">
                      <div class="title">iPhone 6S</div>
                      <small>Lorem ipsum dolor sit amet</small>
                    </div>
                    <div class="value">
                      <div class="small text-muted">Sold this week</div>
                      <strong>1.163</strong>
                    </div>
                    <div class="actions">
                      <button type="button" class="btn btn-link text-muted"><i class="icon-settings"></i>
                      </button>
                    </div>
                  </li>
                  <li>
                    <i class="icon-user bg-danger"></i>
                    <div class="desc">
                      <div class="title">Premium accounts</div>
                      <small>Lorem ipsum dolor sit amet</small>
                    </div>
                    <div class="value">
                      <div class="small text-muted">Sold this week</div>
                      <strong>928</strong>
                    </div>
                    <div class="actions">
                      <button type="button" class="btn btn-link text-muted"><i class="icon-settings"></i>
                      </button>
                    </div>
                  </li>
                  <li>
                    <i class="icon-social-spotify bg-success"></i>
                    <div class="desc">
                      <div class="title">Spotify Subscriptions</div>
                      <small>Lorem ipsum dolor sit amet</small>
                    </div>
                    <div class="value">
                      <div class="small text-muted">Sold this week</div>
                      <strong>893</strong>
                    </div>
                    <div class="actions">
                      <button type="button" class="btn btn-link text-muted"><i class="icon-settings"></i>
                      </button>
                    </div>
                  </li>
                  <li>
                    <i class="icon-cloud-download bg-danger"></i>
                    <div class="desc">
                      <div class="title">Ebook</div>
                      <small>Lorem ipsum dolor sit amet</small>
                    </div>
                    <div class="value">
                      <div class="small text-muted">Downloads</div>
                      <strong>121.924</strong>
                    </div>
                    <div class="actions">
                      <button type="button" class="btn btn-link text-muted"><i class="icon-settings"></i>
                      </button>
                    </div>
                  </li>
                  <li>
                    <i class="icon-camera bg-warning"></i>
                    <div class="desc">
                      <div class="title">Photos</div>
                      <small>Lorem ipsum dolor sit amet</small>
                    </div>
                    <div class="value">
                      <div class="small text-muted">Uploaded</div>
                      <strong>12.125</strong>
                    </div>
                    <div class="actions">
                      <button type="button" class="btn btn-link text-muted"><i class="icon-settings"></i>
                      </button>
                    </div>
                  </li>
                  <li class="divider text-xs-center">
                    <button type="button" class="btn btn-sm btn-link text-muted" data-toggle="tooltip"
                            data-placement="top" title="show more"><i class="icon-options"></i>
                    </button>
                  </li>
                </ul>
              </div>
              <!--/.col-->
            </div>
            <!--/.row-->
            <br/>
            <table class="table table-hover table-outline mb-0 hidden-sm-down">
              <thead class="thead-default">
              <tr>
                <th class="text-xs-center"><i class="icon-people"></i>
                </th>
                <th>User</th>
                <th class="text-xs-center">Country</th>
                <th>Usage</th>
                <th class="text-xs-center">Payment Method</th>
                <th>Activity</th>
              </tr>
              </thead>
              <require from="./users-table"></require>
              <tbody as-element="users-table">

              </tbody>
            </table>
          </div>
        </div>
      </div>
      <!--/.col-->
    </div>
    <!--/.row-->

  </div>

</template>
